<template>
  <div class="home">
    <header>
      <h3>新型冠状肺炎实时监测</h3>
      <span>{{ time }}</span>
    </header>
    <div class="main">
      <div class="left">
        <Echart class="one">
          <template v-slot:text>新增确诊TOP10</template>
          <div class="countryAddConfirmRankList"></div>
        </Echart>
        <Echart class="one two">
          <template v-slot:text>大洲感染总人数趋势图</template>
          <div class="continentStatis"></div>
        </Echart>
        <Echart class="one three">
          <template v-slot:text>大州感染人数饼状图</template>
          <div class="continentStatisthree"></div>
        </Echart>
      </div>
      <div class="content">
        <div class="box">
          <div class="box2">
            <dv-border-box-12>
              <ul class="ul">
                <li>217021468</li>
                <li>46987153</li>
                <li>165524088</li>
                <li>4510227</li>
              </ul>
            </dv-border-box-12>
          </div>
          <ul class="ul2">
            <li>累计确诊</li>
            <li>现存确诊</li>
            <li>累计治愈</li>
            <li>累计死亡</li>
          </ul>
        </div>
        <p>
          <button class="btn1">累计确诊</button>
          <button class="btn1 btn2">现存确诊</button>
        </p>
        <img src="../assets/map.bab2b509.png" alt="" class="map" />
        <img src="../assets/lbx.0dea0f97.png" alt="" class="dian mm" />
        <img src="../assets/jt.c268bab5.png" alt="" class="quan ss" />
        <div class="ditu"></div>
      </div>
      <div class="right">
        <Echart class="one four">
          <template v-slot:text>主要疫情国家治愈例</template>
          <div class="four4"></div>
        </Echart>
        <Echart class="one five">
          <template v-slot:text>世界每周新增治愈和死亡人数</template>
          <div class="five5"></div>
        </Echart>
        <Echart class="one six">
          <template v-slot:text>境外输出病例Top10省份</template>
          <div class="six6"></div>
        </Echart>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import Echart from "@/components/Echart";
import * as echarts from "echarts";
import "../assets/word";
export default {
  components: { Echart },
  data() {
    return {
      time: "",
    };
  },
  created() {
    this.init();
    this.one();
    this.two();
    this.three();
    this.four();
    this.five();
    this.six();
  },
  methods: {
    //时间
    toTimeFormate(date) {
      let Y = date.getFullYear();
      let M =
        date.getMonth() + 1 - 0 >= 10
          ? Number(date.getMonth()) + 1
          : "0" + (Number(date.getMonth()) + 1);
      let D = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
      let h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
      let m =
        date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
      let s =
        date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();
      return Y + "年" + M + "月" + D + "-" + h + "时" + m + "分" + s + "秒";
    },
    // 第一个
    one() {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success: function (res) {
          // console.log(res);
          let list = JSON.parse(res.data);
          // console.log(list);
          const { countryAddConfirmRankList } = list;
          var onenation = [];
          var oneaddConfirm = [];
          countryAddConfirmRankList.forEach((item) => {
            // console.log(item);
            onenation.push(item.nation); //横坐标
            oneaddConfirm.push(item.addConfirm); //参数
          });
          var list1 = echarts.init(
            document.querySelector(".countryAddConfirmRankList")
          );
          var option = {
            title: {
              textStyle: {
                fontWeight: "normal",
                fontSize: 16,
                color: "#F1F1F3",
              },
              top: "10%",
              left: "1.5%",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              top: "15%",
              right: "3%",
              left: "15%",
              bottom: "20%",
            },
            xAxis: [
              {
                type: "category",
                data: onenation,
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.12)",
                  },
                },
                axisLabel: {
                  margin: 10,
                  color: "#e2e9ff",
                  textStyle: {
                    fontSize: 9,
                  },
                },
              },
            ],
            yAxis: [
              {
                splitNumber: 3,
                axisLabel: {
                  formatter: "{value}",
                  color: "#e2e9ff",
                  textStyle: {
                    fontSize: 8,
                  },
                },
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#233e64",
                  },
                },
              },
            ],
            series: [
              {
                type: "bar",
                data: oneaddConfirm,
                barWidth: "10px",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(47, 137, 207)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(47, 137, 207)", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                    barBorderRadius: [30, 30, 30, 30],
                    shadowColor: "rgba(0,160,221,1)",
                    shadowBlur: 4,
                  },
                },
              },
            ],
          };
          option && list1.setOption(option);
        },
      });
    },
    //第二个
    two() {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success: (res) => {
          // console.log(res);
          let list = JSON.parse(res.data);
          // console.log(list);
          // continentStatis
          const { continentStatis } = list;
          // console.log(continentStatis);
          var list1 = echarts.init(document.querySelector(".continentStatis"));
          // console.log(list1);
          var timeArr = [];
          var nowConfirmArr = [];
          var nowConfirmBrr = [];
          var nowConfirmCrr = [];
          var nowConfirmDrr = [];
          var nowConfirmErr = [];
          continentStatis.forEach((item) => {
            // console.log(item);
            timeArr.push(item.date);
            nowConfirmArr.push(item.statis.亚洲);
            nowConfirmBrr.push(item.statis.北美洲);
            nowConfirmCrr.push(item.statis.欧洲);
            nowConfirmDrr.push(item.statis.其他);
            nowConfirmErr.push(item.statis.大洋洲);
          });
          var option = {
            color: ["#1a8ce5", "#633450", "#275e80", "#99754a", "#373588"],
            tooltip: {
              trigger: "axis",
            },
            legend: {
              x: 100,
              top: "5%",
              left: "6%",
              textStyle: {
                color: "#4c9bfd",
              },
              data: ["亚洲", "北美洲", "大洋洲", "欧洲", "其他"],
            },
            grid: {
              left: "0%",
              right: "5%",
              top: "24%",
              bottom: "6%",
              containLabel: true,
            },
            toolbox: {
              show: false,
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              axisLine: {
                lineStyle: {
                  color: "#FF4500",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: "#fff",
                },
              },
              boundaryGap: false,
              data: timeArr,
            },
            yAxis: {
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#032148",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: "#3f80db",
                },
              },
              type: "value",
            },
            series: [
              {
                name: "亚洲",
                smooth: true,
                type: "line",
                showAllSymbol: true,
                symbolSize: 4,
                symbol: "emptyCircle",
                data: nowConfirmArr,
              },
              {
                name: "北美洲",
                smooth: true,
                showAllSymbol: true,
                type: "line",
                symbolSize: 4,
                symbol: "emptyCircle",
                data: nowConfirmBrr,
              },
              {
                name: "大洋洲",
                smooth: true,
                showAllSymbol: true,
                type: "line",
                symbolSize: 4,
                symbol: "emptyCircle",
                data: nowConfirmErr,
              },
              {
                name: "欧洲",
                smooth: true,
                showAllSymbol: true,
                type: "line",
                symbolSize: 4,
                symbol: "emptyCircle",
                data: nowConfirmCrr,
              },
              {
                name: "其他",
                smooth: true,
                showAllSymbol: true,
                type: "line",
                symbolSize: 4,
                symbol: "emptyCircle",
                data: nowConfirmDrr,
              },
            ],
          };
          option && list1.setOption(option);
        },
      });
    },
    // 第三个
    three() {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success: function (res) {
          // console.log(res);
          let list = JSON.parse(res.data);
          // console.log(list);
          // continentStatis
          const { continentStatis } = list;
          // console.log(continentStatis);
          var list1 = echarts.init(
            document.querySelector(".continentStatisthree")
          );
          // console.log(list1);
          var num1 = 0; //欧洲
          var num2 = 0; //北美洲
          continentStatis.forEach((item) => {
            // console.log(item);
            num1 += item.statis.欧洲;
            num2 += item.statis.北美洲;
          });
          var option = {
            tooltip: {
              trigger: "item",
            },
            legend: {
              top: "80%",
              left: "center",
              // 添加字体颜色
              textStyle: {
                color: "#707899", //字体颜色
              },
            },
            color: ["#1089e7", "#f57474"],
            series: [
              {
                name: "各州感染人数",
                type: "pie",
                radius: ["30%", "50%"],
                top: "-20%",
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: "center",
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: "20",
                    fontWeight: "bold",
                    color: "#fff",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: [
                  { value: num2, name: "北美洲" },
                  { value: num1, name: "欧洲" },
                ],
              },
            ],
          };
          option && list1.setOption(option);
        },
      });
    },
    // 第四个
    four() {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success: function (res) {
          // console.log(res);
          let list = JSON.parse(res.data);
          // console.log(list);
          const { importStatis } = list;
          console.log(importStatis);
          var list1 = echarts.init(document.querySelector(".four4"));
          // console.log(importStatis.TopList);
          var data = [77.7, 88.1, 92.6, 0.4, 13.3];
          var titlename = ["美国", "西班牙", "哥伦比亚", "英国", "意大利"];
          var valdata = [];
          var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
          var option = {
            xAxis: {
              show: false,
            },
            grid: {
              left: "5%",
              right: "5%",
              top: "10%",
              bottom: "5%",
              containLabel: true,
            },
            yAxis: [
              {
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  color: "#fff",
                  rich: {
                    lg: {
                      backgroundColor: "#339911",
                      color: "#fff",
                      borderRadius: 15,
                      align: "center",
                      width: 15,
                      height: 15,
                    },
                  },
                },
              },
              {
                show: true,
                inverse: true,
                data: valdata,
                axisLabel: {
                  textStyle: {
                    fontSize: 12,
                    color: "#fff",
                  },
                },
                axisLine: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barWidth: 10,
                itemStyle: {
                  normal: {
                    barBorderRadius: 30,
                    color: function (params) {
                      var num = myColor.length;
                      return myColor[params.dataIndex % num];
                    },
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "inside",
                    formatter: "{c}%",
                  },
                },
              },
              {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barGap: "-100%",
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                itemStyle: {
                  normal: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15,
                  },
                },
              },
            ],
          };
          option && list1.setOption(option);
        },
      });
    },
    //第五个
    five() {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success: function (res) {
          let list = JSON.parse(res.data);
          // console.log(list);
          const { globalDailyHistory } = list;
          var list1 = echarts.init(document.querySelector(".five5"));
          var timedateArr = [];
          var siArr = [];
          var zhiArr = [];
          globalDailyHistory.forEach((item) => {
            // console.log(item);
            timedateArr.push(item.date);
            siArr.push(item.all.dead);
            zhiArr.push(item.all.heal);
          });
          let color = ["#8B5CFF", "#00CA69"];

          let xAxisData = timedateArr;

          const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
              )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
          };

          var option = {
            color: color,
            legend: {
              top: 20,
            },
            tooltip: {
              trigger: "axis",
              extraCssText:
                "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
            },
            grid: {
              top: 50,
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                  formatter: "2020-{value}",
                  textStyle: {
                    color: "#333",
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#D9D9D9",
                  },
                },
                data: xAxisData,
              },
            ],
            yAxis: [
              {
                type: "value",
                name: "单位（万/亿KWh）",
                axisLabel: {
                  textStyle: {
                    color: "#666",
                  },
                },
                nameTextStyle: {
                  color: "#666",
                  fontSize: 12,
                  lineHeight: 40,
                },
                // 分割线
                splitLine: {
                  lineStyle: {
                    type: "dashed",
                    color: "#E9E9E9",
                  },
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                showSymbol: false,
                name: "死亡认数",
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[0],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[0], 0.5),
                    shadowOffsetY: 8,
                  },
                },
                symbol: "circle", //数据交叉点样式
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[0], 0.3),
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[0], 0.1),
                        },
                      ],
                      false
                    ),
                    shadowColor: hexToRgba(color[0], 0.1),
                    shadowBlur: 10,
                  },
                },
                data: siArr,
              },
              {
                name: "治愈人数",
                showSymbol: false,
                type: "line",
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[1],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[1], 0.5),
                    shadowOffsetY: 8,
                  },
                },
                symbol: "circle", //数据交叉点样式 (实心点)
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[1], 0.3),
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[1], 0.1),
                        },
                      ],
                      false
                    ),
                    shadowColor: hexToRgba(color[1], 0.1),
                    shadowBlur: 10,
                  },
                },
                data: zhiArr,
              },
            ],
          };
          option && list1.setOption(option);
        },
      });
    },
    //第6个
    six() {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success: function (res) {
          let list = JSON.parse(res.data);
          console.log(list);
          const { importStatis } = list;
          var list1 = echarts.init(document.querySelector(".six6"));
          var provinceArr = [];
          importStatis.TopList.forEach((item) => {
            // console.log(item);
            provinceArr.push({
              name: item.province,
              value: item.importedCase,
            });
          });
          console.log(provinceArr);
          var option = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            color: [
              "#006cff",
              "#60cda0",
              "#ed8884",
              "#ff9f7f",
              "#0096ff",
              "#9fe6b8",
              "#32c5e9",
              "#1d9dff",
              "#ff9f7f",
            ],
            series: [
              {
                name: "地区分布",
                type: "pie",
                radius: [10, 90],
                center: ["50%", "50%"],
                roseType: "area",
                itemStyle: {
                  borderRadius: 5,
                },
                data: provinceArr,
              },
            ],
          };
          option && list1.setOption(option);
        },
      });
    },
    //地图
    init() {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success: (res) => {
          // console.log(res);
          let list = JSON.parse(res.data);
          console.log(list);
          const { foreignList } = list;
          console.log(foreignList);
          var dituArr = [];
          foreignList.forEach((item) => {
            // console.log(item);   //61    nowConfirm  现存确证    confirm  累计确证
            if (this.flag == false) {
              dituArr.push({
                name: item.name,
                value: item.confirm,
              });
            } else {
              dituArr.push({
                name: item.name,
                value: item.nowConfirm,
              });
            }
          });
          console.log(dituArr);
          var list1 = echarts.init(document.querySelector(".ditu"));
          var option = {
            // 显示数据模态框
            tooltip: {
              trigger: "item",
            },
            // 配置侧边提示栏
            visualMap: {
              min: 0,
              left: 26,
              bottom: 40,
              showLabel: !0,
              textStyle: {
                color: "#fff",
              },
              // 小方块的宽
              itemWidth: 10,
              // 小方块的高
              itemHeight: 10,
              hoverLink: true,
              pieces: [
                {
                  min: 0,
                  max: 0,
                  label: "0",
                  color: "#eeeeee",
                },
                {
                  min: 1,
                  max: 500,
                  label: "1-499",
                  color: "#fff7ba",
                },
                {
                  min: 500,
                  max: 5000,
                  label: "500-4999",
                  color: "#ffc24b",
                },
                {
                  min: 5000,
                  max: 10000,
                  label: "5000-9999",
                  color: "#ff7c20",
                },
                {
                  min: 10000,
                  max: 100000,
                  label: "1万-10万",
                  color: "#fe5e3b",
                },
                {
                  min: 100000,
                  max: 500000,
                  label: "10万-50万",
                  color: "#e2482b",
                },
                {
                  min: 500000,
                  label: "50万以上",
                  color: "#b93e26",
                },
              ],
            },
            series: [
              {
                name: "",
                type: "map",
                mapType: "world",
                // 设置地图禁止缩放
                roam: false,
                label: {
                  show: false,
                },
                itemStyle: {
                  emphasis: { label: { show: false } },
                },
                nameMap: {
                  Afghanistan: "阿富汗",
                  Angola: "安哥拉",
                  Albania: "阿尔巴尼亚",
                  Algeria: "阿尔及利亚",
                  Argentina: "阿根廷",
                  Armenia: "亚美尼亚",
                  Australia: "澳大利亚",
                  Austria: "奥地利",
                  Azerbaijan: "阿塞拜疆",
                  Bahamas: "巴哈马",
                  Bangladesh: "孟加拉国",
                  Belgium: "比利时",
                  Benin: "贝宁",
                  "Burkina Faso": "布基纳法索",
                  Burundi: "布隆迪",
                  Bulgaria: "保加利亚",
                  "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
                  Belarus: "白俄罗斯",
                  Belize: "伯利兹",
                  Bermuda: "百慕大群岛",
                  Bolivia: "玻利维亚",
                  Brazil: "巴西",
                  Brunei: "文莱",
                  Bhutan: "不丹",
                  Botswana: "博茨瓦纳",
                  Cambodia: "柬埔寨",
                  Cameroon: "喀麦隆",
                  Canada: "加拿大",
                  "Central African Rep.": "中非共和国",
                  Chad: "乍得",
                  Chile: "智利",
                  China: "中国",
                  Colombia: "哥伦比亚",
                  Congo: "刚果",
                  "Costa Rica": "哥斯达黎加",
                  "Côte dIvoire": "科特迪瓦",
                  Croatia: "克罗地亚",
                  Cuba: "古巴",
                  Cyprus: "塞浦路斯",
                  "Czech Rep.": "捷克共和国",
                  "Dem. Rep. Korea": "韩国",
                  "Dem. Rep. Congo": "民主刚果",
                  Denmark: "丹麦",
                  Djibouti: "吉布提",
                  "Dominican Rep.": "多米尼加共和国",
                  Ecuador: "厄瓜多尔",
                  Egypt: "埃及",
                  "El Salvador": "萨尔瓦多",
                  "Eq. Guinea": "赤道几内亚",
                  Eritrea: "厄立特里亚",
                  Estonia: "爱沙尼亚",
                  Ethiopia: "埃塞俄比亚",
                  "Falkland Is.": "福克兰群岛",
                  Fiji: "斐济",
                  Finland: "芬兰",
                  France: "法国",
                  "French Guiana": "法属圭亚那",
                  "Fr. S. Antarctic Lands": "法属南部领地",
                  Gabon: "加蓬",
                  Gambia: "冈比亚",
                  Germany: "德国",
                  Georgia: "佐治亚州",
                  Ghana: "加纳",
                  Greece: "希腊",
                  Greenland: "格陵兰",
                  Guatemala: "危地马拉",
                  Guinea: "几内亚",
                  "Guinea-Bissau": "几内亚比绍",
                  Guyana: "圭亚那",
                  Haiti: "海地",
                  "Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
                  Honduras: "洪都拉斯",
                  Hungary: "匈牙利",
                  Iceland: "冰岛",
                  India: "印度",
                  Indonesia: "印度尼西亚",
                  Iran: "伊朗",
                  Iraq: "伊拉克",
                  Ireland: "爱尔兰",
                  Israel: "以色列",
                  Italy: "意大利",
                  "Ivory Coast": "象牙海岸",
                  Jamaica: "牙买加",
                  Japan: "日本",
                  Jordan: "乔丹",
                  Kashmir: "克什米尔",
                  Kazakhstan: "哈萨克斯坦",
                  Kenya: "肯尼亚",
                  Kosovo: "科索沃",
                  Kuwait: "科威特",
                  Kyrgyzstan: "吉尔吉斯斯坦",
                  Laos: "老挝",
                  "Lao PDR": "老挝人民民主共和国",
                  Latvia: "拉脱维亚",
                  Lebanon: "黎巴嫩",
                  Lesotho: "莱索托",
                  Liberia: "利比里亚",
                  Libya: "利比亚",
                  Lithuania: "立陶宛",
                  Luxembourg: "卢森堡",
                  Madagascar: "马达加斯加",
                  Macedonia: "马其顿",
                  Malawi: "马拉维",
                  Malaysia: "马来西亚",
                  Mali: "马里",
                  Mauritania: "毛里塔尼亚",
                  Mexico: "墨西哥",
                  Moldova: "摩尔多瓦",
                  Mongolia: "蒙古",
                  Montenegro: "黑山",
                  Morocco: "摩洛哥",
                  Mozambique: "莫桑比克",
                  Myanmar: "缅甸",
                  Namibia: "纳米比亚",
                  Netherlands: "荷兰",
                  "New Caledonia": "新喀里多尼亚",
                  "New Zealand": "新西兰",
                  Nepal: "尼泊尔",
                  Nicaragua: "尼加拉瓜",
                  Niger: "尼日尔",
                  Nigeria: "尼日利亚",
                  Korea: "朝鲜",
                  "Northern Cyprus": "北塞浦路斯",
                  Norway: "挪威",
                  Oman: "阿曼",
                  Pakistan: "巴基斯坦",
                  Panama: "巴拿马",
                  "Papua New Guinea": "巴布亚新几内亚",
                  Paraguay: "巴拉圭",
                  Peru: "秘鲁",
                  "Republic of the Congo": "刚果共和国",
                  Philippines: "菲律宾",
                  Poland: "波兰",
                  Portugal: "葡萄牙",
                  "Puerto Rico": "波多黎各",
                  Qatar: "卡塔尔",
                  "Republic of Seychelles": "塞舌尔共和国",
                  Romania: "罗马尼亚",
                  Russia: "俄罗斯",
                  Rwanda: "卢旺达",
                  Samoa: "萨摩亚",
                  "Saudi Arabia": "沙特阿拉伯",
                  Senegal: "塞内加尔",
                  Serbia: "塞尔维亚",
                  "Sierra Leone": "塞拉利昂",
                  Slovakia: "斯洛伐克",
                  Slovenia: "斯洛文尼亚",
                  "Solomon Is.": "所罗门群岛",
                  Somaliland: "索马里兰",
                  Somalia: "索马里",
                  "South Africa": "南非",
                  "S. Geo. and S. Sandw. Is.": "南乔治亚和南桑德威奇群岛",
                  "S. Sudan": "南苏丹",
                  Spain: "西班牙",
                  "Sri Lanka": "斯里兰卡",
                  Sudan: "苏丹",
                  Suriname: "苏里南",
                  Swaziland: "斯威士兰",
                  Sweden: "瑞典",
                  Switzerland: "瑞士",
                  Syria: "叙利亚",
                  Tajikistan: "塔吉克斯坦",
                  Tanzania: "坦桑尼亚",
                  Thailand: "泰国",
                  "The Kingdom of Tonga": "汤加王国",
                  "Timor-Leste": "东帝汶",
                  Togo: "多哥",
                  "Trinidad and Tobago": "特立尼达和多巴哥",
                  Tunisia: "突尼斯",
                  Turkey: "土耳其",
                  Turkmenistan: "土库曼斯坦",
                  Uganda: "乌干达",
                  Ukraine: "乌克兰",
                  "United Arab Emirates": "阿拉伯联合酋长国",
                  "United Kingdom": "大不列颠联合王国",
                  "United Republic of Tanzania": "坦桑尼亚联合共和国",
                  "United States": "美国",
                  "United States of America": "美利坚合众国",
                  Uruguay: "乌拉圭",
                  Uzbekistan: "乌兹别克斯坦",
                  Vanuatu: "瓦努阿图",
                  Venezuela: "委内瑞拉",
                  Vietnam: "越南",
                  "West Bank": "西岸",
                  "W. Sahara": "西撒哈拉",
                  Yemen: "也门",
                  Zambia: "赞比亚",
                  Zimbabwe: "津巴布韦",
                },
                data: dituArr,
              },
            ],
          };
          option && list1.setOption(option);
        },
      });
    },
  },
  mounted() {
    setInterval(() => {
      this.time = this.toTimeFormate(new Date());
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
.six6 {
  width: 100%;
  height: 100%;
}
.five5 {
  width: 100%;
  height: 100%;
}
.four4 {
  width: 100%;
  height: 100%;
}
.continentStatis {
  width: 100%;
  height: 100%;
}
.continentStatisthree {
  width: 100%;
  height: 100%;
}
.countryAddConfirmRankList {
  width: 100%;
  height: 100%;
}

li {
  list-style: none;
}
.home {
  width: 100%;
  height: 1100px;
  background-image: url("../assets/bg.a6333996.jpg"); //引入背景图片
  background-repeat: no-repeat; //不平铺
  background-size: 100% 100%; //大小100%
  header {
    width: 100%;
    height: 87px;
    background-image: url("../assets/head_bg.eeff3da5.png");
    background-size: 100% 100%;
    position: relative;
    h3 {
      text-align: center;
      line-height: 87px;
      font-size: 35px;
      color: #fff;
    }
    span {
      position: absolute;
      line-height: 87px;
      font-size: 20px;
      right: 20px;
      top: 0;
      color: #ccc;
    }
  }
  .main {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    position: relative;
    .left {
      width: 520px;
      height: 100%;
      font-size: 20px;
      text-align: center;
      color: #fff;
      .one {
        margin-top: 20px;
      }
    }
    .right {
      width: 520px;
      height: 100%;
      font-size: 20px;
      text-align: center;
      color: #fff;
      .one {
        margin-top: 20px;
      }
    }
    .content {
      .map,
      .dian,
      .quan {
        width: 500px;
        position: absolute;
        top: 150px;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
      .dian {
        width: 650px;
      }
      .quan {
        width: 550px;
      }
      .ditu {
        width: 635px;
        position: absolute;
        top: 80px;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
      .box {
        width: 830px;
        height: 154px;
        background: rgba(101, 132, 226, 0.1);
        margin-top: 10px;
        margin-right: 10px;
        .box2 {
          width: 800px;
          height: 80px;
          padding: 15px;
          .ul {
            display: flex;
            justify-content: space-around;
            line-height: 80px;
            li {
              color: #ffe14d;
              font-size: 30px;
            }
          }
        }
      }
      .ul2 {
        display: flex;
        justify-content: space-around;
        color: #ccc;
        font-size: 20px;
      }
      p {
        display: flex;
        justify-content: space-around;
        margin: 40px;
        .btn1 {
          width: 200px;
          height: 60px;
          border: none;
          background: rgba(98, 182, 255, 0.23921568627450981);
          border-radius: 40px;
          color: #ffe14d;
          font-size: 26px;
        }
        .btn2 {
          color: #fff;
        }
      }
    }
  }

  .ss {
    animation: ss 10s infinite linear;
  }
  @keyframes ss {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .mm {
    animation: mm 10s infinite linear;
  }
  @keyframes mm {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}
</style>